$(function() {
    const q = {
        // 页码值
        pagenum: 1,
        // 每页展示的数据条数
        pagesize: 2,
        cate_id: '',
        state: ''
    }

    function initCateList() {
        axios.get('/my/cate/list').then(({ data: res }) => {
            if (res.code === 0) {
                // console.log(res);
                // TODO:渲染表格中的数据
                const rows = [];
                res.data.forEach((item) => {
                    rows.push(`<option value="${item.id}">${item.cate_name}</option>`);
                })
                $('[name="cate_id"]').append(rows);
                // 告诉layui重新渲染表单下拉
                layui.form.render('select');
            }
        })
    }

    initCateList();

    function initStateList() {
        axios.get('/my/article/list', {
            params: q
        }).then(({ data: res }) => {
            if (res.code === 0) {
                // 渲染文章列表
                const rows = [];
                res.data.forEach(function(item, index) {
                    rows.push(`<tr><td><a href="javascript:;" style="color: blue;" class="art_detail" data-id="${item.id}">${item.title}</a></td>
            <td>${item.cate_name}</td>
            <td>${dayjs(item.pub_date).format('YYYY-MM-DD HH:mm:ss')}</td>
            <td>${item.state}</td>
            <td>
                <button type="button" class="layui-btn layui-btn-xs btn-edit">编辑</button>
                <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id="${item.id}">删除</button>
            </td></tr>`)
                })
                $('tbody').html(rows);

                renderpage(res.total);
            }
        })
    }
    initStateList();
    // 实现筛选功能
    $('form').on('submit', function(e) {
            e.preventDefault();
            // 要根据用户指定的筛选条件，重新请求第1页的数据
            //1.把用户勾选的分类的id，存储到q.cate_id中
            //2.把用户勾选的发布状态，存储到q.state中
            //3.把页码值重置为1
            q.cate_id = $('[name="cate_id"]').val();
            q.state = $('[name="state"]').val();
            q.pagenum = 1;
            initStateList();
        })
        // 重置功能(1.清空可选项列表数据 2.重新请求列表全部数据)
    $('[type="reset"]').on('click', function() {
        q.cate_id = '';
        q.state = '';
        q.pagenum = 1;
        initStateList();
    })

    // 添加分页(函数)
    function renderpage(total) {
        layui.laypage.render({
            elem: 'page-box', //注意，这里的 test1 是 ID，不用加 # 号
            limit: q.pagesize, // 每页展示多少条数据
            count: total, //数据总数，从服务端得到
            curr: q.pagenum, // 指定哪个页码值需要被高亮
            limits: [4, 8, 12, 16, 20],
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            jump: function(obj, first) {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数
                q.pagenum = obj.curr;
                q.pagesize = obj.limit;
                //首次不执行
                if (!first) {
                    //do something
                    initStateList();
                }
            }
        });
    }

    // 删除文章
    $('tbody').on('click', '.btn-delete', function() {
        let id = $(this).attr('data-id');
        layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function(index) {
            //do something
            axios.delete('/my/article/info', { params: { id } }).then(({ data: res }) => {
                if (res.code === 0) {
                    layer.msg(res.message);
                    // 优化删除功能,避免出现空白页
                    if (q.pagenum > 1 && $('tbody tr').length === 1) {
                        q.pagenum--;
                    }
                    initStateList();
                }
            })
            layer.close(index);
        });

    })

    // 文章预览
    $('tbody').on('click', '.art_detail', function() {
        let id = $(this).attr('data-id');
        axios.get('/my/article/info', { params: { id } }).then(({ data: res }) => {
            layer.open({
                type: 1,
                area: ['85%', '85%'],
                title: '预览文章',
                content: `<div class="artinfo-box">
                <h1 class="artinfo-title">${res.data.title}</h1>
                <div class="artinfo-bar">
                  <span>作者：${res.data.nickname || res.data.username}</span>
                  <span>发布时间：${dayjs(res.data.pub_date).format('YYYY-MM-DD HH:mm:ss')}</span>
                  <span>所属分类：${res.data.cate_name}</span>
                  <span>状态：${res.data.state}</span>
                </div>
                <hr>
                <img src="http://www.liulongbin.top:3008${res.data.cover_img}" alt="" class="artinfo-cover">
                <div>${res.data.content}</div>
                </div>`
            });
        })
    })


})